---
import Layout from '@/layouts/Layout.astro'

export const prerender = true
---

<Layout
  title="404 - La Velada del Año V"
  description="Página no encontrada en La Velada del Año V. Vuelve al inicio para seguir disfrutando del evento de boxeo de Ibai Llanos."
  canonical="https://www.infolavelada.com/404"
>
  <section
    class="mask-fade-bottom flex min-h-screen w-full items-center justify-center text-center"
  >
    <div class="w-full max-w-3xl items-center justify-center">
      <h1 class="text-theme-raisin-black">
        <span
          class="rotate-113 mb-12 w-fit mx-auto block text-[120px] font-bold tracking-[.025em]"
          aria-hidden="true"
        >
          404
        </span>
        <span class="mb-2 block text-4xl font-bold tracking-wider">¡FUERA DE COMBATE!</span>
      </h1>
      <p class="text-theme-raisin-black mb-6 text-xl tracking-wide">
        vaya, parece que te han noqueado...
      </p>
      <div class="flex min-h-4 items-center justify-center">
        <a
          href="/"
          class="bg-theme-turquoise text-theme-raisin-black flex items-center justify-center rounded-lg px-8 py-4 text-sm font-bold tracking-widest transition-all duration-300 ease-out hover:rotate-[2deg] active:scale-90"
          aria-label="Botón para volver al inicio"
        >
          <span class="relative z-10 flex items-center gap-2 tracking-widest">
            Volver al ring
          </span>
        </a>
      </div>
    </div>
  </section>
</Layout>
